﻿<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">表单验证 <kbd class="pull-right">Validation</kbd></h1>
</div>
<div class="wrapper-md">
  <div ng-controller="FormDemoCtrl">
    <div class="row">
      <div class="col-sm-6">
        <form name="form" class="form-validation">
          <div class="panel panel-default">
            <div class="panel-heading">
              <span class="h4">注册</span>
            </div>
            <div class="panel-body">
              <p class="text-muted">请填写表单信息后继续</p>
              <div class="form-group">
                <label>用户名 <em class="text-muted">(由数字英文组成的4-10个字符)</em></label>
                <input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
              </div>
              <div class="form-group">
                <label>邮箱</label>
                <input type="email" class="form-control" ng-model="user.email" required >
              </div>
              <div class="form-group pull-in clearfix">
                <div class="col-sm-6">
                  <label>密码</label>
                  <input type="password" class="form-control" name="password" ng-model="password" required >   
                </div>
                <div class="col-sm-6">
                  <label>重复密码</label>
                  <input type="password" class="form-control" name="confirm_password" required ng-model="confirm_password" ui-validate=" '$value==password' " ui-validate-watch=" 'password' ">
                  <span ng-show='form.confirm_password.$error.validator'>两次密码输入不一致!</span>
                </div>
              </div>
              <div class="form-group">
                <label>联系电话</label>
                <input type="text" class="form-control" placeholder="1XX XXXX XXXX" ng-model="phone" ng-pattern="/1[0-9]{2} ?[0-9]{4} ?[0-9]{4}$/" required >
              </div>
              <div class="checkbox">
                <label class="i-checks">
                  <input type="checkbox" ng-model="agree" required><i></i> 我同意 <a href class="text-info">此霸王条款</a>
                </label>
              </div>
            </div>
            <footer class="panel-footer text-right bg-light lter">
              <button type="submit" class="btn btn-success" ng-disabled="form.$invalid">提交</button>
            </footer>
          </div>
        </form>
      </div>
      <div class="col-sm-6">
        <form name="form-contact" class="form-validation">
          <div class="panel panel-default">
            <div class="panel-heading">
              <span class="h4">联系我们</span>
            </div>
            <div class="panel-body">
              <p class="text-muted">需要支持? 请填写下在的表单.</p>                        
                <div class="form-group pull-in clearfix">
                  <div class="col-sm-6">
                    <label>你的姓名</label>
                    <input type="text" class="form-control" placeholder="请输入姓名" ng-model="contact.name" required >
                  </div>
                  <div class="col-sm-6">
                    <label>电子邮箱</label>
                    <input type="email" class="form-control" placeholder="请输入Email" ng-model="contact.email" required >
                  </div>
                </div>
                <div class="form-group">
                  <label>个人主页</label>
                  <input type="url" class="form-control" placeholder="http://" ng-model="contact.url" required>
                </div>
                <div class="form-group">
                  <label>消息内容</label>
                  <textarea class="form-control" rows="6" placeholder="请输入你的消息"></textarea>
                </div>
            </div>
            <footer class="panel-footer text-right bg-light lter">
              <button type="submit" class="btn btn-success">提交</button>
            </footer>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <form name="formValidate" class="form-horizontal form-validation">
          <div class="panel panel-default">
            <div class="panel-heading">
              <strong>基础约束</strong>
            </div>
            <div class="panel-body">                    
              <div class="form-group">
                <label class="col-sm-3 control-label">必填项</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="必填项 required" ng-model="f.a" required >
                  <select class="form-control m-t" ng-model="f.b" required >
                      <option value="">请选择</option>
                      <option value="foo">屎味的巧克力</option>
                      <option value="bar">巧克力味的屎</option>
                  </select>
                  <label class="checkbox i-checks">
                    <input type="checkbox" ng-model="f.c" required><i></i> 同意该政策
                  </label>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">最小长度</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="至少输入 5 个字符 minlength" ng-model="f.d" ng-minlength="5" required>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">最大长度</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="最多输入 5 个字符 maxlength" ng-model="f.e" ng-maxlength="5" required>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">长度区间</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="请输入 5~10 个之符" ng-model="f.f" ng-minlength="5" ng-maxlength="10" required>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">最小数值</label>
                <div class="col-sm-9">
                  <input type="number" class="form-control" placeholder="不能小于 5 哦  ui-validate=&quot; '$value &gt;= 5' &quot;" ng-model="f.g" ui-validate=" '$value >= 5' " required>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">最大数值</label>
                <div class="col-sm-9">
                  <input type="number" class="form-control" placeholder="不能大于 5 哦  ui-validate=&quot; '$value &lt;= 5' &quot;" ng-model="f.h" ui-validate=" '$value <= 5' " required>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">数值区间</label>
                <div class="col-sm-9">
                    <input type="number" class="form-control" placeholder="必须输入 5~10 之间的数字哦!   ui-validate=&quot;{ a:'$value &gt;= 5', b:'$value &lt;= 10' }&quot;" ng-model="f.i" ui-validate="{ a:'$value >= 5', b:'$value <= 10' }" required>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">正则验证</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="请输入颜色值，如 #ff0000  ng-pattern=&quot;/^正则表达式$/&quot;" ng-model="f.j" ng-pattern="/^#(?:[0-9a-fA-F]{3}){1,2}$/" required>
                </div>
              </div>
            </div>
            <footer class="panel-footer text-right bg-light lter">
              <button type="submit" class="btn btn-success">提交</button>
            </footer>
          </div>
        </form>
      </div>
      <div class="col-sm-6">
        <form name="forma" class="form-horizontal form-validation">
          <div class="panel panel-default">
            <div class="panel-heading">
              <strong>常见类型验证</strong>
            </div>
            <div class="panel-body">                 
              <div class="form-group">
                <label class="col-sm-3 control-label">电子邮箱</label>
                <div class="col-sm-9">
                  <input type="email" class="form-control" placeholder="请输入Email" ng-model="g.a" required >    
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">网址</label>
                <div class="col-sm-9">
                  <input type="url" class="form-control" placeholder="http://" ng-model="g.b" required >
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">数字验证</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="digits" ng-model="g.c" ng-pattern="/^[0-9]+$/" required >
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">数值输入</label>
                <div class="col-sm-9">
                  <input type="number" class="form-control" placeholder="number" ng-model="g.d" required >
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">大小写字母</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="请输入大写或小写字母" ng-model="g.e" ng-pattern="/^[a-zA-Z]+$/" required >
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">日期</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="YYYY-MM-DD" ng-model="g.f" ng-pattern="/^[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])$/" required >
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">手机号码</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="1XX XXXX XXX" ng-model="g.g" ng-pattern="/^1[0-9]{2} ?[0-9]{4} ?[0-9]{4}$/" required >
                </div>
              </div>            
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">一致性</label>
                <div class="col-sm-9">
                  <div class="row">
                    <div class="col-sm-6"><input type="text" name="foo" class="form-control" ng-model="g.h" required></div>
                    <div class="col-sm-6"><input type="text" name="confirm_foo" class="form-control" required ng-model="g.i" ui-validate=" '$value==g.h' " ui-validate-watch=" 'g.h' ">
                    <span ng-show='forma.confirm_foo.$error.validator'>两次输入不一致!</span></div>
                  </div>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg pull-in"></div>
              <div class="form-group">
                <label class="col-sm-3 control-label">黑名单</label>
                <div class="col-sm-9">
                  <input type="email" name="email" class="form-control" placeholder="试着输入 '123@qq.com'" ng-model="g.j" ui-validate="{blacklist : 'notBlackListed($value)' }" required>
                  <span ng-show='forma.email.$error.blacklist'>这是一个黑名单中的邮箱地址!</span>
                </div>
              </div>
            </div>
            <footer class="panel-footer text-right bg-light lter">
              <button type="submit" class="btn btn-success">提交</button>
            </footer>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <form name="formc" class="form-horizontal form-validation">
          <div class="panel panel-default">
            <div class="panel-heading">
              <strong>掩码输入</strong>
            </div>
            <div class="panel-body">
              <div class="form-group">
                <label class="col-sm-3 control-label">掩码输入</label>
                <div class="col-sm-9">
                    <input type="text" ng-model="g.k1" name="masked" ui-mask="(999) 999-9999" placeholder="(999) 999-9999" class="form-control m-b" required>
                    <input type="text" ng-model="g.k2" name="masked" ui-mask="(999) 999-9999 转 999" placeholder="(999) 999-9999 转 999" class="form-control m-b" required>
                    <input type="text" ng-model="g.k3" name="masked" ui-mask="**:AAA-999" placeholder="**:AAA-999" class="form-control m-b" required>
                    <input type="text" ng-model="g.k4" name="masked" ui-mask="999 9999 9999" placeholder="999 9999 9999" class="form-control m-b" required>
                    <p class="m-b"><code>A</code> 任意字母.<br><code>9</code> 任意数字.<br><code>*</code> 任意字母或数字.</p>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>